/**
 * @author kobe
 * @date   16/05/31
 * @author truexin
 * @reviseDate   16/08/12
 */

import PullRefresh from '../components/mui/PullRefresh.js';
import NoData from '../components/NoData.js';

(function (lf, r) {
    var RC = r.createClass,
        ajax = lf.utils.ajax,
        getUrlParam = lf.utils.getUrlParam,
        doAction = lf.bridgeJs.doAction;
    
    const TYPE = getUrlParam('type') == 5 ? 'system' : 'merge';
    
    var NoticeList = RC({
        render: function () {
            var user = this.props.user,
                noData = this.props.noData;
            
            var notice_list = this.props.info.map(function (info) {
                return (
                    <List info={info} noticeId={info.id} user={user}/>
                )
            })
            if (noData && TYPE == 'system') {
                var noData = {
                    span_text: '您的管理制度列表为空',
                };
                return <NoData data={noData}/>
            } else if (noData && TYPE == 'merge') {
                var noData = {
                    span_text: '您的最新通知列表为空',
                };
            }
            else {
                return (
                    <ul className="mui-table-view mui-table-view-striped mui-table-view-condensed">
                        {notice_list}
                    </ul>
                )
            }
        }
    })
    
    var List = RC({
        componentDidMount: function () {
            var toDetail = r.findDOMNode(this.refs.toDetail),
                me = this,
                user = this.props.user;
            
            $(toDetail).on('tap', function () {
                
                var btn = $(this);
                var title = me.props.info.title;
                if (title.length > 10) {
                    title = title.substring(0, 10) + '...'
                }
                ;
                ajax({
                    type: "POST",
                    data: {
                        staffId: user.id,
                        noticeId: me.props.noticeId,
                    },
                    success: function (data) {
                        if (data.code == '200') {
                            btn.find('.title').addClass('read');
                            btn.find('.watchNum').text(parseInt(btn.find('.watchNum').text()) + 1);
                            doAction('notice-new-intro.html?noticeId=' + me.props.noticeId, title);
                        }
                        else {
                            alert(data.desc);
                        }
                    }
                }, lf.api.notice.saveNoticeBrowse);
            })
        },
        render: function () {
            var info = this.props.info,
                type = "",
                publishTime = lf.utils.format(info.publishTime, 'yyyy-MM-dd hh:mm');
            switch (info.type) {
                case '1':
                    type = {
                        text: "活动",
                        bgColor: "greenBg"
                    };
                    break;
                case '2':
                    type = {
                        text: "提醒",
                        bgColor: "purpleBg"
                    };
                    break;
                case '3':
                    type = {
                        text: "通知",
                        bgColor: "redBg"
                    };
                    break;
                case '4':
                    type = {
                        text: "动态",
                        bgColor: "orangeBg"
                    };
                    break;
                case '5':
                    type = {
                        text: "制度",
                        bgColor: "buleBg"
                    };
                    break;
                case '6':
                    type = {
                        text: "资讯",
                        bgColor: "pinkBg"
                    };
                    break;
            }
            return (
                <li className="mui-table-view-cell">
                    <a href="javascript:;" className="to-detail" ref="toDetail">
                        <div className="mui-table">
                            <div className="mui-table-cell mui-col-xs-10">
                                <h4 className={"mui-ellipsis title " + (info.readStatus == 1 ? "read" : '') }>{info.title}</h4>
                                <p className="mui-ellipsis info">
                                    <span className="date"><i className="iconfont date-icon"></i>{publishTime}</span>
                                   <span className="watch">
                                        <i className="iconfont watch-icon"></i>
                                        <span className="watchNum" ref="showWatchNum">{info.amount}</span>
                                    </span>
                                </p>
                            </div>
                            <div className="mui-table-cell mui-col-xs-2 mui-text-right">
                                <span className={"type "+type.bgColor}>{type.text}</span>
                            </div>
                        </div>
                    </a>
                </li>
            
            )
        }
    })
    
    var Root = r.createClass({
        getInitialState: function () {
            return ({
                list: [],
                user: '',
                groupId: '',
                noData: ''
            })
            
        },
        getList: function (page) {
            if (!page) page = 1;
            var me = this;
            
            var api = '',
                data = '';
            
            if (TYPE == 'system') {
                api = lf.api.notice.getManagementList;
                
                data = {
                    deptId: me.state.user.departmentId,
                    staffId: me.state.user.id,
                    page: page,
                }
            } else {
                api = lf.api.notice.getNoticesList;
                
                data = {
                    staffId: me.state.user.id,
                    groupId: me.state.user.departmentId,
                    page: page,
                }
            }
            
            ajax({
                data: data,
                success: function (data) {
                    //成功
                    if (data.code == '200') {
                        if (data.dataList.length == 0) {
                            me.setState({noData: true})
                        } else {
                            let resultList = data.dataList,
                                maxCount = data.maxCount,
                                appendedList;
                            
                            appendedList = me.state.list
                            $.each(resultList, function (i, item) {
                                appendedList.push(item);
                            });
                            
                            mui('#pullrefresh')
                            .pullRefresh()
                            .endPullupToRefresh((appendedList.length == maxCount)); //refresh completed
                            
                            me.setState({
                                list: appendedList,
                                noData: false
                            });
                        }
                    }
                    else {
                        alert(data.desc);
                    }
                }
            }, api);
            
        },
        componentWillMount: function () {
            var me = this;
            lf.bridgeJs.getUser(function (userInfo) {
                me.setState({user: userInfo});
                ajax({
                    type: "POST",
                    data: {
                        staffId: userInfo.id,
                    },
                    success: function (data) {
                        //成功
                        if (data.code == '200') {
                            me.setState({globalId: data.data.globalId});
                            me.getList();
                        }
                        else {
                            alert(data.desc);
                        }
                    }
                }, lf.api.staff.getStaff);
                
                
            })
        },
        render: function () {
            return (
                <div className="notice-new container">
                    <NoticeList info={this.state.list} user={this.state.user} noData={this.state.noData}/>
                </div>
            )
        },
        componentWillReceiveProps: function (nextProps) {
            var page = nextProps.page;
            this.getList(page, true)
        }
    });
    
    var PullRefreshCon = React.createClass({
        getInitialState: function () {
            return {
                page: 1,
            }
        },
        componentWillMount: function () {
            
        },
        pullupFn: function () {
            var newPage = ++this.state.page;
            this.setState({page: newPage});
        },
        render: function () {
            var me = this;
            return <PullRefresh pullupFn={me.pullupFn} data={<Root page={me.state.page}/>}/>;
        }
    });
    
    r.render(
        <PullRefreshCon />,
        document.getElementById('root'), function () {
            $('#root').css('background', 'none');
        }
    )
    
})(liefeng, React);
